<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  showCoords: {
    type: Boolean,
    required: true,
  },
  others: {
    type: Object,
    required: true,
  }
});
const emits = defineEmits(['zt-change']);

const bgw = 1920, bgh = 1003;
const buoyw = 36, buoyh = 102, scale = 1;
const buoys = [
  {name: '加药间', left: 455, top: 285, isActive: true, icon: require('../assets/buoy_medicine.png'), },
  {name: '消毒池', left: 785, top: 130, isActive: false, icon: require('../assets/buoy_concentration.png'),},
  {name: '二沉池', left: 527, top: 373, isActive: true, icon: require('../assets/buoy_concentration.png'),},
  {name: '二沉池', left: 676, top: 307, isActive: true, icon: require('../assets/buoy_concentration.png'),},
  {name: '提升泵房', left: 806, top: 224, isActive: true, icon: require('../assets/buoy_pump_house.png'),},
  {name: '高效沉淀池', left: 894, top: 167, isActive: true, icon: require('../assets/buoy_concentration.png'),},
  {name: '二期氧化沟', left: 1056, top: 80, isActive: true, icon: require('../assets/buoy_oxidation_ditch.png'),},
  {name: '二期沉淀池', left: 1255, top: 0, isActive: false, icon: require('../assets/buoy_concentration.png'),},
  {name: '生物反应池', left: 738, top: 462, isActive: true, icon: require('../assets/buoy_concentration.png'),},
  {name: '一期氧化沟', left: 1215, top: 160, isActive: true, icon: require('../assets/buoy_oxidation_ditch.png'),},
  {name: '一期沉淀池', left: 1402, top: 60, isActive: false, icon: require('../assets/buoy_concentration.png'),},
  {name: '鼓风机房', left: 658, top: 793, isActive: true, icon: require('../assets/buoy_machine.png'),},
  {name: '配电室', left: 796, top: 663, isActive: false, icon: require('../assets/buoy_power_distribution.png'),},
  {name: '脱水机房', left: 842, top: 693, isActive: true, icon: require('../assets/buoy_machine.png'),},
  {name: '污泥浓缩池', left: 1020, top: 586, isActive: true, icon: require('../assets/buoy_concentration.png'),},
  {name: '细栅格', left: 1198, top: 468, isActive: true, icon: require('../assets/buoy_grid.png'),},
  {name: '粗栅格', left: 1338, top: 372, isActive: true, icon: require('../assets/buoy_grid.png'),},
];
buoys.forEach((i, index) => {
  i._left = (i.left + buoyw) / bgw * 100 + '%';
  i._top = (i.top + buoyh) / bgh * 100 + '%';
  if (props.others.length >= index && props.others[index]) {
    i.page = props.others[index].v;
  }
});
</script>

<template>
  <div class="bgBox over">
    <div class="bgImg over"></div>
    <!-- <div class="cover over"></div> -->
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="buoys over" v-if="props.showCoords">
      <div
        v-for="i in buoys"
        class="buoy"
        :class="{'isActive': i.isActive}"
        :style="{left: i._left, top: i._top}"
        @click="emits('zt-change', i.page)"
      >
        <img :src="i.icon" />
        <span>{{ i.name }}</span>
      </div>
    </div>
    
  </div>
</template>

<style lang="scss" scoped>
.over {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.bgBox {
  background-color: #000;
}
.bgImg {
  background: url('../assets/bgImg.png');
  background-size: 100% 100%;
}
.cover {
  background: linear-gradient(90deg, rgba(0,25,27,0.8) 0%, rgba(57,138,143,0.15) 33%, rgba(57,138,143,0.15) 69%, rgba(0,25,27,0.8) 100%);
  opacity: 0.6;
}
.side {
  width: 539px;
  position: absolute;
  top: 0;
  bottom: 0;
}
.left {
  left: 0;
  background: linear-gradient(90deg, #002324 0%, rgba(0,0,0,0) 93%);
}
.right {
  right: 0;
  background: linear-gradient(270deg, #002324 0%, rgba(0,0,0,0) 93%);
}
.buoys {
  animation: buoyshow 1s linear 0.5s;
  -webkit-animation: buoyshow 1s linear 0.5s;
  animation-fill-mode: backwards;
  -webkit-animation-fill-mode: backwards;
}
@keyframes buoyshow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.buoy {
  width: 72px;
  height: 120px;
  background: url('../assets/buoy_bgImg_dark.png');
  background-size: 100% 100%;
  position: absolute;
  transform: translate(-36px, -102px) scale(0.85);
  cursor: pointer;
  transform-origin: 36px 102px;
  span {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 50%;
    top: 6px;
    transform: translateX(-50%);
    height: 11px;
    line-height: 12px;
    font-size: 14px;
    font-weight: bold;
    color: #FFFFFF;
  }
  img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 39px;
    width: 12px;
    height: 10px;
  }
}
.isActive {
  background: url('../assets/buoy_bgImg_ok.png');
  background-size: 100% 100%;
}
</style>